Fetch API за напреднали: Прихващане на заявки и кеширане на отговори

Fetch API се превърна в стандарт за извършване на мрежови заявки в съвременния JavaScript. Докато основната му употреба е лесна, отключването на пълния му потенциал изисква разбиране на напреднали техники като прихващане на заявки и кеширане на отговори. В тази статия ще разгледаме тези концепции в детайли, предоставяйки практически примери и най-добри практики за изграждане на високопроизводителни, глобално достъпни уеб приложения.

Разбиране на Fetch API

Fetch API предоставя мощен и гъвкав интерфейс за извличане на ресурси през мрежата. Той използва Promises, което улеснява управлението и разбирането на асинхронни операции. Преди да се потопим в напредналите теми, нека накратко преговорим основите:

Основна употреба на Fetch

Една проста Fetch заявка изглежда така:

            
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('Data:', data);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

            

              
                Copy
              
            
          

Този код извлича данни от посочения URL, проверява за HTTP грешки, парсва отговора като JSON и записва данните в конзолата. Обработката на грешки е от решаващо значение за осигуряването на стабилно приложение.

Прихващане на заявки

Прихващането на заявки включва модифициране или наблюдаване на мрежови заявки, преди те да бъдат изпратени до сървъра. Това може да бъде полезно за различни цели, включително:

• Добавяне на хедъри за удостоверяване
• Трансформиране на данните в заявката
• Записване на заявки за целите на дебъгването
• Симулиране на API отговори по време на разработка

Прихващането на заявки обикновено се постига с помощта на Service Worker, който действа като прокси между уеб приложението и мрежата.

Service Workers: Основата за прихващане

Service Worker е JavaScript файл, който работи във фонов режим, отделно от основната нишка на браузъра. Той може да прихваща мрежови заявки, да кешира отговори и да осигурява офлайн функционалност. За да използвате Service Worker, първо трябва да го регистрирате:

            
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(error => {
      console.error('Service Worker registration failed:', error);
    });
}

            

              
                Copy
              
            
          

Този код проверява дали браузърът поддържа Service Workers и регистрира файла service-worker.js. Обхватът (scope) определя кои URL адреси ще контролира Service Worker.

Имплементиране на прихващане на заявки

Във файла service-worker.js можете да прихващате заявки, използвайки събитието fetch:

            
self.addEventListener('fetch', event => {
  // Intercept all fetch requests
  event.respondWith(
    new Promise(resolve => {
      // Clone the request to avoid modifying the original
      const req = event.request.clone();

      // Modify the request (e.g., add an authentication header)
      const headers = new Headers(req.headers);
      headers.append('Authorization', 'Bearer your_api_key');

      const modifiedReq = new Request(req.url, {
        method: req.method,
        headers: headers,
        body: req.body,
        mode: 'cors',
        credentials: req.credentials,
        cache: req.cache,
        redirect: req.redirect,
        referrer: req.referrer,
        integrity: req.integrity
      });

      // Make the modified request
      fetch(modifiedReq)
        .then(response => resolve(response))
        .catch(error => {
          console.error('Fetch error in Service Worker:', error);
          // Optionally, return a default response or error page
          resolve(new Response('Offline', { status: 503, statusText: 'Service Unavailable' }));
        });
    })
  );
});

            

              
                Copy
              
            
          

Този код прихваща всяка fetch заявка, клонира я, добавя Authorization хедър и след това прави модифицираната заявка. Методът event.respondWith() казва на браузъра как да обработи заявката. Ключово е да се клонира заявката; в противен случай ще модифицирате оригиналната заявка, което може да доведе до неочаквано поведение. Той също така се уверява, че всички оригинални опции на заявката са препратени, за да се гарантира съвместимост. Обърнете внимание на обработката на грешки: важно е да се осигури резервен вариант в случай, че fetch заявката се провали (например, когато сте офлайн).

Пример: Добавяне на хедъри за удостоверяване

Често срещан случай на употреба на прихващане на заявки е добавянето на хедъри за удостоверяване към API заявки. Това гарантира, че само оторизирани потребители могат да достъпват защитени ресурси.

            
self.addEventListener('fetch', event => {
  if (event.request.url.startsWith('https://api.example.com')) {
    event.respondWith(
      new Promise(resolve => {
        const req = event.request.clone();
        const headers = new Headers(req.headers);
        // Replace with actual authentication logic (e.g., retrieving token from local storage)
        const token = localStorage.getItem('api_token'); 

        if (token) {
          headers.append('Authorization', `Bearer ${token}`);
        } else {
           console.warn("No API token found, request may fail.");
        }

        const modifiedReq = new Request(req.url, {
          method: req.method,
          headers: headers,
          body: req.body,
          mode: 'cors',
          credentials: req.credentials,
          cache: req.cache,
          redirect: req.redirect,
          referrer: req.referrer,
          integrity: req.integrity
        });

        fetch(modifiedReq)
          .then(response => resolve(response))
          .catch(error => {
            console.error('Fetch error in Service Worker:', error);
            resolve(new Response('Offline', { status: 503, statusText: 'Service Unavailable' }));
          });
      })
    );
  } else {
    // Let the browser handle the request as usual
    event.respondWith(fetch(event.request));
  }
});

            

              
                Copy
              
            
          

Този код добавя Authorization хедър към заявки, които започват с https://api.example.com. Той извлича API токена от локалното хранилище (local storage). От решаващо значение е да се приложат правилно управление на токените и мерки за сигурност, като HTTPS и сигурно съхранение.

Пример: Трансформиране на данни от заявка

Прихващането на заявки може да се използва и за трансформиране на данни от заявката, преди те да бъдат изпратени до сървъра. Например, може да искате да конвертирате данни в определен формат или да добавите допълнителни параметри.

            
self.addEventListener('fetch', event => {
  if (event.request.url.includes('/submit-form')) {
    event.respondWith(
      new Promise(resolve => {
        const req = event.request.clone();
        req.text().then(body => {
          try {
            const parsedBody = JSON.parse(body);
            // Transform the data (e.g., add a timestamp)
            parsedBody.timestamp = new Date().toISOString();

            // Convert the transformed data back to JSON
            const transformedBody = JSON.stringify(parsedBody);

            const modifiedReq = new Request(req.url, {
              method: req.method,
              headers: req.headers,
              body: transformedBody,
              mode: 'cors',
              credentials: req.credentials,
              cache: req.cache,
              redirect: req.redirect,
              referrer: req.referrer,
              integrity: req.integrity
            });

            fetch(modifiedReq)
              .then(response => resolve(response))
              .catch(error => {
                console.error('Fetch error in Service Worker:', error);
                resolve(new Response('Offline', { status: 503, statusText: 'Service Unavailable' }));
              });
          } catch (error) {
            console.error("Error parsing request body:", error);
            resolve(fetch(event.request)); // Fallback to original request
          }
        });
      })
    );
  } else {
    event.respondWith(fetch(event.request));
  }
});

            

              
                Copy
              
            
          

Този код прихваща заявки към /submit-form, парсва тялото на заявката като JSON, добавя клеймо за време (timestamp) и след това изпраща трансформираните данни към сървъра. Обработката на грешки е от съществено значение, за да се гарантира, че приложението няма да се счупи, ако тялото на заявката не е валиден JSON.

Кеширане на отговори

Кеширането на отговори включва съхраняване на отговорите от API заявки в кеша на браузъра. Това може значително да подобри производителността, като намали броя на мрежовите заявки. Когато има наличен кеширан отговор, браузърът може да го обслужи директно от кеша, без да се налага да прави нова заявка до сървъра.

Предимства на кеширането на отговори

• Подобрена производителност: По-бързо зареждане и по-отзивчиво потребителско изживяване.
• Намалена консумация на трафик: По-малко данни се прехвърлят по мрежата, което спестява трафик както за потребителя, така и за сървъра.
• Офлайн функционалност: Кешираните отговори могат да бъдат обслужвани дори когато потребителят е офлайн, осигурявайки безпроблемно изживяване.
• Спестяване на разходи: По-ниската консумация на трафик води до по-ниски разходи както за потребителите, така и за доставчиците на услуги, особено в региони със скъпи или ограничени планове за данни.

Имплементиране на кеширане на отговори със Service Workers

Service Workers предоставят мощен механизъм за имплементиране на кеширане на отговори. Можете да използвате Cache API, за да съхранявате и извличате отговори.

            
const cacheName = 'my-app-cache-v1';
const cacheableUrls = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  'https://api.example.com/data'
];

// Install event:  Cache static assets
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(cacheName)
      .then(cache => {
        console.log('Caching app shell');
        return cache.addAll(cacheableUrls);
      })
  );
});

// Activate event: Clean up old caches
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.filter(name => name !== cacheName)
          .map(name => caches.delete(name))
      );
    })
  );
});

// Fetch event: Serve cached responses or fetch from the network
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // Cache hit - return response
        if (response) {
          return response;
        }

        // Not in cache - fetch from network
        return fetch(event.request).then(
          response => {
            // Check if we received a valid response
            if (!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // Clone the response (because it's a stream and can only be consumed once)
            const responseToCache = response.clone();

            caches.open(cacheName)
              .then(cache => {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        ).catch(error => {
          // Handle network error
          console.error("Fetch failed:", error);
          // Optionally, provide a fallback response (e.g., offline page)
          return caches.match('/offline.html');
        });
      })
  );
});

            

              
                Copy
              
            
          

Този код кешира статични активи по време на събитието за инсталиране (install) и обслужва кеширани отговори по време на събитието за извличане (fetch). Ако отговор не бъде намерен в кеша, той го извлича от мрежата, кешира го и след това го връща. Събитието activate се използва за почистване на стари кешове, когато Service Worker се актуализира. Този подход също така гарантира, че се кешират само валидни отговори (статус 200 и тип 'basic').

Стратегии за кеширане

Има няколко различни стратегии за кеширане, които можете да използвате, в зависимост от нуждите на вашето приложение:

• Първо кеш (Cache-First): Опитва се първо да обслужи отговора от кеша. Ако не бъде намерен, го извлича от мрежата и го кешира. Това е подходящо за статични активи и ресурси, които не се променят често.
• Първо мрежа (Network-First): Опитва се първо да извлече отговора от мрежата. Ако това се провали, го обслужва от кеша. Това е подходящо за динамични данни, които трябва да са актуални.
• Кеш, след това мрежа (Cache, then Network): Обслужва отговора от кеша незабавно, а след това актуализира кеша с най-новата версия от мрежата. Това осигурява бързо първоначално зареждане и гарантира, че потребителят винаги има най-новите данни (в крайна сметка).
• Остарял, докато се пре-валидира (Stale-While-Revalidate): Връща кеширан отговор незабавно, като същевременно проверява мрежата за актуализирана версия. Актуализира кеша във фонов режим, ако е налична по-нова версия. Подобно на "Кеш, след това мрежа", но осигурява по-безпроблемно потребителско изживяване.

Изборът на стратегия за кеширане зависи от специфичните изисквания на вашето приложение. Вземете предвид фактори като честотата на актуализациите, важността на актуалността на данните и наличния трафик.

Пример: Кеширане на API отговори

Ето пример за кеширане на API отговори, използвайки стратегията "Първо кеш" (Cache-First):

            
self.addEventListener('fetch', event => {
  if (event.request.url.startsWith('https://api.example.com')) {
    event.respondWith(
      caches.match(event.request)
        .then(response => {
          // Cache hit - return response
          if (response) {
            return response;
          }

          // Not in cache - fetch from network
          return fetch(event.request).then(
            response => {
              // Check if we received a valid response
              if (!response || response.status !== 200 || response.type !== 'basic') {
                return response;
              }

              // Clone the response (because it's a stream and can only be consumed once)
              const responseToCache = response.clone();

              caches.open(cacheName)
                .then(cache => {
                  cache.put(event.request, responseToCache);
                });

              return response;
            }
          );
        })
    );
  } else {
    // Let the browser handle the request as usual
    event.respondWith(fetch(event.request));
  }
});

            

              
                Copy
              
            
          

Този код кешира API отговори от https://api.example.com. Когато се направи заявка, Service Worker първо проверява дали отговорът вече е в кеша. Ако е там, кешираният отговор се връща. Ако не, заявката се прави към мрежата, а отговорът се кешира, преди да бъде върнат.

Съображения за напреднали

Инвалидиране на кеша

Едно от най-големите предизвикателства при кеширането е инвалидирането на кеша. Когато данните на сървъра се променят, трябва да се уверите, че кешът се актуализира. Има няколко стратегии за инвалидиране на кеша:

• "Разбиване" на кеша (Cache Busting): Добавете номер на версия или клеймо за време към URL адреса на ресурса. Когато ресурсът се промени, URL адресът се променя и браузърът ще изтегли новата версия.
• Изтичане на базата на време: Задайте максимална възраст за кешираните отговори. След изтичане на времето, браузърът ще изтегли нова версия от сървъра. Използвайте хедъра Cache-Control, за да укажете максималната възраст.
• Ръчно инвалидиране: Използвайте метода caches.delete(), за да премахнете ръчно кеширани отговори. Това може да бъде задействано от събитие от страна на сървъра или от действие на потребителя.
• WebSockets за актуализации в реално време: Използвайте WebSockets, за да изпращате актуализации от сървъра към клиента, като инвалидирате кеша, когато е необходимо.

Мрежи за доставка на съдържание (CDNs)

Мрежите за доставка на съдържание (CDNs) са разпределени мрежи от сървъри, които кешират съдържание по-близо до потребителите. Използването на CDN може значително да подобри производителността за потребители по целия свят, като намали латентността и консумацията на трафик. Популярни доставчици на CDN включват Cloudflare, Amazon CloudFront и Akamai. При интегриране с CDN, уверете се, че хедърите Cache-Control са правилно конфигурирани за оптимално поведение на кеширането.

Съображения за сигурност

При имплементиране на прихващане на заявки и кеширане на отговори е от съществено значение да се вземат предвид последиците за сигурността:

• HTTPS: Винаги използвайте HTTPS, за да защитите данните при пренос.
• CORS: Конфигурирайте правилно Cross-Origin Resource Sharing (CORS), за да предотвратите неоторизиран достъп до ресурси.
• Санитизация на данни: Санитизирайте потребителския вход, за да предотвратите атаки от тип cross-site scripting (XSS).
• Сигурно съхранение: Съхранявайте чувствителни данни, като API ключове и токени, на сигурно място (например, използвайки HTTPS-only бисквитки или сигурен API за съхранение).
• Subresource Integrity (SRI): Използвайте SRI, за да гарантирате, че ресурси, изтеглени от трети страни (CDN), не са били подправени.

Дебъгване на Service Workers

Дебъгването на Service Workers може да бъде предизвикателство, но инструментите за разработчици на браузъра предоставят няколко функции, които да помогнат:

• Раздел Application: Разделът Application в Chrome DevTools предоставя информация за Service Workers, включително техния статус, обхват и кеш памет.
• Записване в конзолата: Използвайте изрази console.log(), за да записвате информация за активността на Service Worker.
• Точки на прекъсване (Breakpoints): Задайте точки на прекъсване в кода на Service Worker, за да преминете стъпка по стъпка през изпълнението и да инспектирате променливи.
• Актуализиране при презареждане (Update on Reload): Активирайте "Update on reload" в раздела Application, за да се уверите, че Service Worker се актуализира всеки път, когато презаредите страницата.
• Дерегистриране на Service Worker (Unregister): Използвайте бутона "Unregister" в раздела Application, за да дерегистрирате Service Worker. Това може да бъде полезно при отстраняване на проблеми или за започване "на чисто".

Заключение

Прихващането на заявки и кеширането на отговори са мощни техники, които могат значително да подобрят производителността и потребителското изживяване на уеб приложенията. Като използвате Service Workers, можете да прихващате мрежови заявки, да ги модифицирате при нужда и да кеширате отговори за офлайн функционалност и по-бързо зареждане. Когато се приложат правилно, тези техники могат да ви помогнат да изградите високопроизводителни, глобално достъпни уеб приложения, които предоставят безпроблемно потребителско изживяване, дори при предизвикателни мрежови условия. Вземете предвид разнообразните мрежови условия и разходите за данни, пред които са изправени потребителите по света, когато прилагате тези техники, за да осигурите оптимална достъпност и приобщаване. Винаги приоритизирайте сигурността, за да защитите чувствителни данни и да предотвратите уязвимости.

Като овладеете тези напреднали техники на Fetch API, можете да издигнете уменията си в уеб разработката на следващо ниво и да създавате наистина изключителни уеб приложения.